<template>
  <div class="app-container">
    <!-- 公共顶部 -->
    <large-screen-header :to="'/housingFacilities'" :back="true" />
    <!-- 主体部分 -->
    <div class="app-main">
      <!-- 左侧 -->
      <div class="app-left">
        <div class="app-left-item">
          <subheadings :name="'全国房屋详查数据情况'" />
          <ScrutinizeData />
        </div>
        <div class="app-left-item">
          <!-- <subheadings :name="'各省(直辖市)详查数据面积抽样率'" /> -->
          <!-- <SampleRate /> -->
          <subheadings :name="'全国房屋详查数据覆盖情况'" />
          <CoverageRate />
        </div>
        <div class="app-left-item">
          <subheadings :name="'房屋抽样详查建筑结构类型统计（栋数）'" />
          <TypeStatistics />
        </div>
      </div>
      <!-- 中心部分 -->
      <div class="app-center">
        <!-- 标题 -->
        <headline :name="'全国房屋详查数据'" />
        <!-- 地图 -->
        <div class="app-map">
          <SystemSelect :styles="{ position: 'absolute', top: '0px', left: '42px' }" />
          <!-- <IndexMap></IndexMap> -->
          <OlMap :refId="'housingfacilities'" style="height: 100%" @getMap="getMap"></OlMap>
          <div>
            <el-checkbox
              @change="showBuildingNumber"
              v-model="isShowBuildingNumber"
              style="position: absolute; left: 90px; top: -55px; color: white"
              label="栋数"
              size="large"
            />
          </div>
          <ComLegend
            style="position: absolute; left: 42px; bottom: 150px"
            title="面积范围（万平米）"
            subTitle=""
            :items="legendItems"
            :items-per-column="10"
          ></ComLegend>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="app-right">
        <div class="app-right-item">
          <subheadings :name="'采集入库情况'" />
          <DetailedSurvey />
        </div>
        <div class="app-right-item">
          <subheadings :name="'房屋详查近五年数据采集情况(全国)'" />
          <HousingDataCollection :type="2" />
        </div>
        <div class="app-right-item">
          <!-- <subheadings :name="'各省(直辖市)已提交详查统计'" /> -->
          <StatisticalTable :type="2" :name="'各省(直辖市)已提交详查统计'" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import ScrutinizeData from '../components/ScrutinizeData.vue';
import SampleRate from '../components/SampleRate.vue';
import TypeStatistics from '../components/TypeStatistics';
import DetailedSurvey from '../components/DetailedSurvey.vue';
import StatisticalTable from '../components/StatisticalTable';
import HousingDataCollection from '../components/HousingDataCollection.vue';
import CoverageRate from '../components/CoverageRate.vue';

import OlMap from '@/components/Olmap';
import { DoubleClickZoom, MouseWheelZoom, DragPan } from 'ol/interaction';
import { Style, Circle as CircleStyle, Fill, Stroke, Icon, Text } from 'ol/style';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { GeoJSON as GeoJSonFormat } from 'ol/format';
import { Select } from 'ol/interaction';
import ComLegend from '@/components/ComLegend';
import point_house_img from '@/assets/map/image/newImage/point_house.png';
import { getChinaBaseMap, getBaseDir, getChinaBaseFeature } from '@/map/projMap.js';
import { getMapDate } from '@/api/housingFacilities.js';

const mapInstance = ref(null);
const vectorLayer = ref(null);
const overlayLayer = ref(null);
const siftFillLayer = ref(null);
const siftPointsLayer = ref(null);
const selectInteraction = ref(null); // 选择交互对象
const isShowBuildingNumber = ref(false);
const siftData = ref(null);

const legendItems = [
  { label: '>25', color: 'rgba(26,66,194,1)', w: 20, h: 8, r: 0 },
  { label: '0-25', color: 'rgba(48,96,255,1)', w: 20, h: 8, r: 0 },
  { label: '未开展工作', color: 'rgba(95,133,255,1)', w: 20, h: 8, r: 0 },
];

const getMap = (map) => {
  mapInstance.value = map.value;
  console.log('jjj', mapInstance.value);

  addProvinceNameLayer();
  getMapData();
};

function getMapData() {
  //请求详查数据
  getMapDate({ flag: 0 }).then((res) => {
    siftData.value = res.data;
    console.log('===============siftData: ', siftData.value);
    showSiftProvinceFillLayer();
  });
}

function addProvinceNameLayer() {
  const geojsonSource = new VectorSource({
    url: getChinaBaseMap,
    format: new GeoJSonFormat(),
  });

  // 创建省份名称文本图层
  const textLayer = new VectorLayer({
    source: geojsonSource,
    zIndex: 2,
    style: function (feature) {
      const textstyle = new Style({
        text: new Text({
          font: '10px Calibri,sans-serif',
          fill: new Fill({ color: '#fff' }),
          text: feature.get('name'),
        }),
      });
      return textstyle;
    },
  });

  mapInstance.value.addLayer(textLayer);
}

async function showSiftProvinceFillLayer() {
  if (siftFillLayer.value) {
    siftFillLayer.value.setVisible(true);
    return;
  }

  siftFillLayer.value = new VectorLayer({
    source: new VectorSource(),
    zIndex: 1,
  });

  mapInstance.value.addLayer(siftFillLayer.value);

  let features = await getChinaBaseFeature();
  features.forEach((feature) => {
    let color = 'rgba(95,133,255,1)';
    let style = new Style({
      fill: new Fill({ color: color }),
      stroke: new Stroke({ color: 'rgba(10, 22, 139, 1)', width: 1 }),
    });
    feature.setStyle(style);

    if (siftData && siftData.value) {
      let adcode = feature.get('adcode');
      siftData.value.forEach((item) => {
        if (item.code == adcode) {
          let dongNum = Number(item.dongNum);
          if (dongNum > 25) color = 'rgba(26,66,194,1)';
          else if (dongNum > 0 && dongNum <= 25) color = 'rgba(48,96,255,1)';

          let style = new Style({
            fill: new Fill({ color: color }),
            stroke: new Stroke({ color: 'rgba(10, 22, 139, 1)', width: 1 }),
          });
          feature.setStyle(style);
        }
      });
    }
    siftFillLayer.value.getSource().addFeature(feature);
  });
}

function showSiftPointsLayer() {
  if (siftPointsLayer.value) {
    siftPointsLayer.value.setVisible(true);
    return;
  }

  siftPointsLayer.value = new VectorLayer({
    source: new VectorSource(),
    zIndex: 3,
  });

  mapInstance.value.addLayer(siftPointsLayer.value);

  if (!siftData || !siftData.value) return;
  siftData.value.forEach((item) => {
    const lon = item.longitude;
    const lat = item.latitude;

    const point = new Feature({
      geometry: new Point([lon, lat]),
    });

    const style1 = new Style({
      image: new Icon({
        src: point_house_img,
        anchor: [0.5, 1],
        scale: 1.0,
      }),
      text: new Text({
        text: '详查',
        font: '11px Calibri,sans-serif',
        fill: new Fill({ color: 'rgba(70,255,255,1)' }),
        offsetY: -68, // 设置文本相对于图标的纵向偏移量
      }),
    });
    const style2 = new Style({
      text: new Text({
        text: item.dongNum,
        font: '11px Calibri,sans-serif',
        fill: new Fill({ color: 'rgba(70,255,255,1)' }),
        offsetY: -53, // 设置文本相对于图标的纵向偏移量
      }),
    });

    point.setStyle([style1, style2]);
    siftPointsLayer.value.getSource().addFeature(point);
  });
}

function showBuildingNumber(val) {
  if (val) {
    if (siftPointsLayer.value) {
      siftPointsLayer.value.setVisible(true);
    } else {
      showSiftPointsLayer();
    }
  } else {
    if (siftPointsLayer.value) {
      siftPointsLayer.value.setVisible(false);
    }
  }
}
</script>

<style scoped lang="scss">
.app-main {
  display: flex;
  justify-content: space-between;

  .app-left {
    margin-left: 30px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 40px);
    width: 450px;

    &-item {
      width: 450px;
      height: 300px;
      background: linear-gradient(
        135deg,
        rgba(0, 3, 45, 0.85) 0%,
        rgba(0, 12, 88, 0.85) 50%,
        rgba(0, 3, 45, 0.85) 100%
      );
      position: relative;
      z-index: 1000;
      &::after {
        content: '';
        display: block;
        width: 450px;
        height: 20px;
        background-size: 100% 100%;
        background-image: url('@/assets/images/common/bg_bottom.png') !important;
      }

      &:first-child {
        height: 200px;
      }
      &:last-child {
        height: 400px;
      }
    }
  }

  .app-map {
    width: 960px;
    height: 100%;
    //overflow: hidden; //test
    position: relative;
  }
  .app-right {
    margin-right: 30px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 40px);
    width: 450px;

    &-item {
      width: 450px;
      height: 300px;
      background: linear-gradient(
        135deg,
        rgba(0, 3, 45, 0.85) 0%,
        rgba(0, 12, 88, 0.85) 50%,
        rgba(0, 3, 45, 0.85) 100%
      );
      position: relative;
      &::after {
        content: '';
        display: block;
        width: 450px;
        height: 20px;
        background-size: 100% 100%;
        background-image: url('@/assets/images/common/bg_bottom.png') !important;
      }
    }
  }
}

// tab栏样式
:deep(.el-tabs__nav) {
  float: right;
}
:deep(.el-tabs--card > .el-tabs__header) {
  border: none;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  border: none;
}
:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  height: 14px;
  padding: 0 5px !important;
  line-height: 14px;
  color: #107ce5;
  font-size: 12px !important;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  border-bottom: none;
  color: #46ffff !important;
  text-decoration-line: underline;
  text-underline-position: under;
  line-height: 1;
}
</style>
